<template>
  <view>
    <u-cell-group>
      <u-cell-item :arrow="false">
        <u-icon name="list-dot" size="43" slot="icon" @click="toSlip"></u-icon>
        <view slot="right-icon">
          <u-icon name="search" size="43" @click="toSearch"></u-icon>
        </view>
      </u-cell-item>
    </u-cell-group>
    <view style="width: 270rpx" class="c-pb10">
      <u-tabs :list="list" :is-scroll="false" :current="cuttren" active-color="#848484" @change="change"></u-tabs>
    </view>
    <view v-if="cuttren === 0">
      <view class="w90">
        <u-swiper :list="bannerList" name="image" height="400" mode="none" @click="swiperClick"></u-swiper>
      </view>
      <view class="w90 toyouhui">
        <view class="boxshadow"></view>
        <view class="textBox">
          <view>领券中心</view>
          <view>大牌5折券天天上新</view>
          <button @click="youhuiquan" class="lingqu">立即领取</button>
        </view>
      </view>
      <view class="c-flex c-flex-between w90" style="margin-top: 60rpx">
        <view class="c-fs-34 c-fw600">最新推荐</view>
        <view class="c-fs-34 c-fw600" @click="seeMoreNew">查看更多</view>
      </view>
      <view class="scroll">
        <view :style="{width: wNum + '%'}">
          <GoodList
            :data="data2"
            :col="scrollCol"
            keys="id"
            mainTitleValue="effectList"
            bgimg="pic"
            :iconimgBoo="false"
            viceTitleValue="name"
            moneyValue="price"
            :pageView="true"
            shoppingNum="sale"
            viewNum="look"
            moneySymbol="￥"
            @navTo="navTo"
          />
        </view>
      </view>

      <view class="c-flex c-flex-between w90" style="margin-top: 60rpx">
        <view class="c-fs-34 c-fw600">项目专区</view>
        <view class="c-fs-34 c-fw600" @click="seeMoreZhuan">查看更多</view>
      </view>
      <view class="imgBox w90">
        <image
          :src="item.image"
          mode=""
          class="imgStyle"
          v-for="item in imgArr"
          :key="item.id"
          @click="navToZhuan(item.id)"
        />
      </view>

      <view class="c-flex c-flex-between w90" style="margin-top: 60rpx">
        <view class="c-fs-34 c-fw600">热门专区</view>
        <view class="c-fs-34 c-fw600" @click="seeMoreHot">查看更多</view>
      </view>
      <view>
        <GoodList
          :data="data"
          keys="id"
          mainTitleValue="effectList"
          bgimg="pic"
          iconimg="/static/icon/aixin.png"
          viceTitleValue="name"
          moneyValue="price"
          :pageView="true"
          :iconimgBoo="false"
          shoppingNum="sale"
          viewNum="look"
          moneySymbol="￥"
          @navTo="navTo"
        />
      </view>
    </view>
    <view v-else>
      <view class="imgBox w90 mb200">
        <image
          :src="item.image"
          mode=""
          class="imgStyle"
          v-for="item in imgArr2"
          :key="item.id"
          @click="navToZhuan(item.id)"
        />
      </view>
    </view>
    <Slip ref="slip" @selectChange="selectChange" />
  </view>
</template>

<script>
  // 侧滑栏
  import Slip from './slip'
  import GoodList from '@/commponents/public/goodsList'
  // 商品相关的接口
  import goods from '@/services/goods'
  // 公共接口home集合
  import home from '@/services/public'
  export default {
    data() {
      return {
        wNum: '',
        scrollCol: '',
        list: [{name: '产品'}, {name: '项目'}],
        imgArr: [],
        imgArr2: [],
        bannerList: [],
        data: [],
        data2: [],
        cuttren: 0,
        searchForm: {},
        newSearch: {
          isNew: 1,
          page: 1,
          limit: 10
        },
        hotSearch: {
          isHot: 1,
          page: 1,
          limit: 10
        }
      }
    },
    components: {GoodList, Slip},
    onShow() {
      // 轮播图
      this.bannerGain()
      // 最新推荐
      this.newGoodsList()
      // 专题专区
      this.specialZoneList()
      // 热门专区
      this.hotGoodList()
      this.specialZoneList2()
      // 判断登录 修改分享path
    },
    methods: {
      specialZoneList2() {
        home.moduleList().then(res => {
          this.imgArr2 = res.list
        })
      },
      navToZhuan(id) {
        wx.navigateTo({
          url: `/pages/productList/index?moduleId=${id}`
        })
      },
      selectChange(data) {
        this.newSearch = {
          isNew: 1,
          page: 1,
          limit: 10,
          ...data
        }
        this.hotSearch = {
          isHot: 1,
          page: 1,
          limit: 10,
          ...data
        }
        this.newGoodsList()
        this.hotGoodList()
      },
      navTo(data) {
        wx.navigateTo({
          url: `/pages/productDetails/index?id=${data}`
        })
      },
      toSearch() {
        wx.navigateTo({
          url: `/pages/search/index`
        })
      },
      toSlip() {
        this.$refs.slip.init()
      },
      navToZhuan(id) {
        wx.navigateTo({
          url: `/pages/productList/index?moduleId=${id}`
        })
      },
      seeMoreZhuan() {
        wx.navigateTo({
          url: `/pages/zhuanqu/index`
        })
      },
      seeMoreHot() {
        wx.navigateTo({
          url: `/pages/productList/index?hot=true`
        })
      },
      seeMoreNew() {
        wx.navigateTo({
          url: `/pages/productList/index?new=true`
        })
      },
      youhuiquan() {
        wx.navigateTo({
          url: `/pages/youhuiquan/index`
        })
      },
      change(index) {
        this.cuttren = index
      },
      hotGoodList() {
        goods.list(this.hotSearch).then(res => {
          this.data = res.list
        })
      },
      specialZoneList() {
        home.moduleList({page: 1, limit: 3}).then(res => {
          this.imgArr = res.list
        })
      },
      newGoodsList() {
        goods.list(this.newSearch).then(res => {
          this.data2 = res.list
          this.wNum = this.data2.length * 40
          this.scrollCol = this.data2.length
        })
      },
      bannerGain() {
        home.banner().then(res => {
          this.bannerList = res
        })
      },
      swiperClick(index) {
        wx.navigateTo({
          url: `/pages/productDetails/index?id=${this.bannerList[index].productId}`
        })
      }
    }
  }
</script>

<style lang="scss">
  u-navbar {
    /deep/ .u-status-bar {
      display: none;
    }
    .lingqu{
      &::after{
        display: none;
      }
    }
    /deep/ .u-navbar-inner {
      margin-right: 0 !important;
    }
    /deep/ .u-navbar-placeholder {
      height: 44px !important;
    }
  }
  .shopping {
    margin-right: 24rpx;
  }
  .w90 {
    // width: 100%;
    margin: 0 30rpx;
  }
  .imgStyle {
    width: 100%;
    height: 290rpx;
    margin-top: 40rpx;
    border-radius: 40rpx;
  }
  .mb200 {
    margin-bottom: 200rpx;
  }
  .scroll {
    width: 100%;
    overflow: auto;
  }
  .toyouhui {
    box-sizing: border-box;
    margin-top: 50rpx;
    margin-bottom: 60rpx;
    height: 200rpx;
    background: url('/static/image/youhuibg.png') 0 0 / 100% 100%;
    display: flex;
    .boxshadow {
      width: 30%;
      visibility: hidden;
      height: 100%;
    }
    .textBox {
      width: 70%;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      font-size: 36rpx;
      height: 100%;
      position: relative;
      > view {
        margin-left: 30rpx;
        &:first-of-type {
          margin-top: 60rpx;
        }
        &:nth-of-type(2) {
          margin-top: 15rpx;
          font-size: 24rpx;
          font-weight: 100;
        }
      }
      > button {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-39%);
        width: 170rpx;
        height: 60rpx;
        background: #ff6b22;
        border-radius: 20rpx;
        font-size: 22rpx;
        font-weight: 500;
        line-height: 60rpx;
        color: #fff;
        &::after{
          display: none!important;
        }
      }
    }
  }
</style>
